<template>
	<view>
		<uni-group title="热门城市">
			<view class="item-container">
				<view class="thumb-box u-border" v-for="(item1, index1) in list" :key="index1" @click="dian(item1)">
					<view class="item-menu-name">{{item1}}</view>
				</view>
			</view>
		</uni-group>
		<uni-group title="选择城市">
			<u-field label="选择城市" @click="show = true"  v-model="dizhi"></u-field>
			<br>
			<button type="primary" @click="dianjiindex">确认</button>
		</uni-group>
		<u-picker mode="region" @confirm="chonge" v-model="show"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'三亚',
					'北京',
					'上海',
					'广州',
				],
				show:false,
				dizhi:''
			}
		},
		methods: {
			dianjiindex(){
				uni.switchTab({
					url:'../index'
				})
			},
			chonge(e){
				let area = e.area.label
				let city = e.city.label
				let province = e.province.label
				this.dizhi = province+city+area
			},
			dian(value){
				uni.setStorage({
					key:'dizhi',
					data:value,
					success: (res) => {
						uni.switchTab({
							url:'../index'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.item-container {
				display: flex;
				flex-wrap: wrap;
			}
		
			.thumb-box {
				width: 25%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-top: 20rpx;
			}
		
			.item-menu-image {
				width: 80rpx;
				height: 80rpx;
			}
</style>
